// 柱状图模块
(function() {
    //  1实例化对象
    var myChart = echarts.init(document.querySelector(".line .chart"));
    var data = [{
        "name": "一月",
        "value": 27852
    }, {
        "name": "二月",
        "value": 30145
    }, {
        "name": "三月",
        "value": 26454
    }, {
        "name": "四月",
        "value": 25765
    }, {
        "name": "五月",
        "value": 28654
    }, {
        "name": "六月",
        "value": 28642
    }, {
        "name": "七月",
        "value": 27654
    }, {
        "name": "八月",
        "value": 29867
    }, {
        "name": "九月",
        "value": 25676
    }, {
        "name": "十月",
        "value": 24666
    }, {
        "name": "十一月",
        "value": 29876
    }, {
        "name": "十二月",
        "value": 28900
    }];
    var xData = [],
        yData = [];
    var min = 50; 
    data.map(function(a, b) {
        xData.push(a.name);
        if (a.value === 0) {
            yData.push(a.value + min);
        } else {
            yData.push(a.value);
        }
    });

    // 2 指定配置项和数据
    var option = {
      color: ['#3398DB'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'line',
              lineStyle: {
                  opacity: 0
              }
          },
          formatter: function(prams) {
              if (prams[0].data === min) {
                  return "月客运量："
              } else {
                  return "月客运量：" + prams[0].data
              }
          }
      },
      legend: {
          data: ['直接访问', '背景'],
          show: false
      },
      grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: '7%',
          height: '85%',
          containLabel: true,
          z: 22
      },
      xAxis: [{
          type: 'category',
          gridIndex: 0,
          data: xData,
          axisTick: {
              alignWithLabel: true
          },
          axisLine: {
              lineStyle: {
                  color: '#0c3b71'
              }
          },
          axisLabel: {
              show: true,
              color: 'rgb(170,170,170)',
              fontSize:12
          }
      }],
      yAxis: [{
              type: 'value',
              gridIndex: 0,
              splitLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              min: 20000,
              max: 31000,
              axisLine: {
                  lineStyle: {
                      color: '#0c3b71'
                  }
              },
              axisLabel: {
                  color: 'rgb(170,170,170)',
                  formatter: '{value}'
              }
          },
          {
              type: 'value',
              gridIndex: 0,
              min: min,
              max: 100,
              splitNumber: 12,
              splitLine: {
                  show: false
              },
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  show: false
              },
              splitArea: {
                  show: true,
                  areaStyle: {
                      color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                  }
              }
          }
      ],
      series: [{
              name: '合格率',
              type: 'bar',
              barWidth: '30%',
              xAxisIndex: 0,
              yAxisIndex: 0,
              itemStyle: {
                  normal: {
                      barBorderRadius: 30,
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1, [{
                                  offset: 0,
                                  color: '#00feff'
                              },
                              {
                                  offset: 0.5,
                                  color: '#027eff'
                              },
                              {
                                  offset: 1,
                                  color: '#0286ff'
                              }
                          ]
                      )
                  }
              },
              data: yData,
              zlevel: 11

          },
          {
              name: '背景',
              type: 'bar',
              barWidth: '50%',
              xAxisIndex: 0,
              yAxisIndex: 1,
              barGap: '-135%',
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
              itemStyle: {
                  normal: {
                      color: 'rgba(255,255,255,0.1)'
                  }
              },
              zlevel: 9
          },
        
      ]
    }


    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
})();


(function() {
  //  1实例化对象
    var myChart = echarts.init(document.querySelector(".linelie .chart"));
    var option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.9)',
            formatter: function (params) {
                return (
                    params.seriesName +
                    '<br/>' +
                    params.marker +
                    '<span style="color:' +
                    params.color +
                    '">' +
                    params.data['name'] +
                    '\n' +
                    params.data['value'] +
                    '</span>'
                );
            },
        },
        legend: {
            selectedMode: false,
            orient: 'vertical',
            itemWidth: 8,
            itemHeight: 8,
            icon: 'circle',
            right: '10',
            top: 'center',
            textStyle: {
                fontSize: 18,
                color: '#00BFFF',
            },
            data: ['0-2', '2-4', '4-6', '6-8', '>8'],
        },
        series: [
            {
                name: '',
                type: 'pie',
                hoverAnimation: false,
                legendHoverLink: false,
                cursor: 'default',
                radius: ['32%', '50%'],
                center: ['45%', '50%'],
                color: [
                    'rgba(0, 150, 254, 0.2)',
                    'rgba(2, 205, 206, 0.2)',
                    'rgba(253, 160, 0, 0.2)',
                    'rgba(191, 40, 18, 0.2)',
                ],
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                zlevel: 1,
                itemStyle: {
                    normal: {
                        borderColor: '#0a1a2a',
                    },
                    ellipsis: {
                        borderColor: '#0a1a2a',
                    },
                },
                tooltip: {
                    show: false,
                },
                data: [
                    {
                        value: 31,
                        name: '',
                    },
                    {
                        value: 44,
                        name: '',
                    },
                    {
                        value: 6,
                        name: '',
                    },
                    {
                        value: 19,
                        name: '',
                    },
                ],
            },
            {
                name: '',
                type: 'pie',
                zlevel: 2,
                cursor: 'default',
                hoverAnimation: false,
                legendHoverLink: false,
                radius: ['37%', '50%'],
                center: ['45%', '50%'],
                color: [
                    'rgba(0, 150, 254, 0.5)',
                    'rgba(2, 205, 206, .5)',
                    'rgba(253, 160, 0, .5)',
                    'rgba(191, 40, 18, .5)',
                ],
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                itemStyle: {
                    normal: {
                        // shadowBlur: 15,
                        // shadowColor: 'rgba(0, 0, 0, 0.5)',
                        borderColor: '#0a1a2a',
                        // borderWidth:'10',
                    },
                    ellipsis: {
                        borderColor: '#0a1a2a',
                    },
                },
                tooltip: {
                    show: false,
                },
                data: [
                    {
                        value: 21,
                        name: '',
                    },
                    {
                        value: 44,
                        name: '',
                    },
                    {
                        value: 35,
                        name: '',
                    },

                ],
            },
            {
                name: 'title',
                type: 'pie',
                zlevel: 3,
                hoverAnimation: false,
                legendHoverLink: false,
                radius: ['43%', '50%'],
                center: ['45%', '50%'],
                color: ['rgba(0, 150, 254, 1)', 'rgba(2, 205, 206, 1)', 'rgba(253, 160, 0, 1)', 'rgba(191, 40, 18, 1)'],
                label: {
                    show: true,
                 
                    formatter: (params) => {
                        return `
     ${params.name}: ${params.percent}%
     `;
                    },
                    padding:[0,-30],
                    textStyle:{
                        lineHeight:25
                    }
                },
                labelLine: {
                    show: true,
                    // showAbove:true,
                    length: 30,
                    length2: 50,
                    
                },
                itemStyle: {
                    shadowBlur: 15,
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    borderColor: '#0a1a2a',
                },
                data: [
                    {
                        value: 64.95,
                        name: '0-2',
                        label: {
                            color: 'rgba(0, 150, 254, 1)',
                        },
                    },
                    {
                        value: 7.68,
                        name: '2-4',
                        label: {
                            color: 'rgba(2, 205, 206, 1)',
                        },
                    },
                    {
                        value: 17.65,
                        name: '4-6',
                        label: {
                            color: 'rgba(253, 160, 0, 1)',
                        },
                    },
                    {
                        value: 9.33,
                        name: '6-8',
                        label: {
                            color: 'rgba(191, 40, 18, .5)',
                        },
                    },
                    {
                        value: 0.38,
                        name: '>8',
                        label: {
                            color: 'rgba(191, 40, 18, .5)',
                        },
                    },
                ],
            },
        ],
    
    
    };


  // 3 配置项给实例对象
  myChart.setOption(option);
  // 4 让图表跟随屏幕自动的去适应
  window.addEventListener('resize',function() {
      myChart.resize();
  });
})();
(function() {
    //  1实例化对象
      var myChart = echarts.init(document.querySelector(".lineban .chart"));
      var option = {
          tooltip: {
              trigger: 'item',
              backgroundColor: 'rgba(0,0,0,0.9)',
              formatter: function (params) {
                  return (
                      params.seriesName +
                      '<br/>' +
                      params.marker +
                      '<span style="color:' +
                      params.color +
                      '">' +
                      params.data['name'] +
                      '\n' +
                      params.data['value'] +
                      '</span>'
                  );
              },
          },
          legend: {
              selectedMode: false,
              orient: 'vertical',
              itemWidth: 8,
              itemHeight: 8,
              icon: 'circle',
              right: '10',
              top: 'center',
              textStyle: {
                  fontSize: 18,
                  color: '#00BFFF',
              },
              data: ['0-2', '2-4', '>4'],
          },
          series: [
              {
                  name: '',
                  type: 'pie',
                  hoverAnimation: false,
                  legendHoverLink: false,
                  cursor: 'default',
                  radius: ['32%', '50%'],
                  center: ['45%', '50%'],
                  color: [
                      'rgba(0, 150, 254, 0.2)',
                      'rgba(2, 205, 206, 0.2)',
                      'rgba(253, 160, 0, 0.2)',
                      'rgba(191, 40, 18, 0.2)',
                  ],
                  label: {
                      show: false,
                  },
                  labelLine: {
                      show: false,
                  },
                  zlevel: 1,
                  itemStyle: {
                      normal: {
                          borderColor: '#0a1a2a',
                      },
                      ellipsis: {
                          borderColor: '#0a1a2a',
                      },
                  },
                  tooltip: {
                      show: false,
                  },
                  data: [
                    {
                        value: 1.97,
                        name: '',
                    },
                    {
                        value: 14.98,
                        name: '',
                    },
                    {
                        value: 83.05,
                        name: '',
                    },
                  ],
              },
              {
                  name: '',
                  type: 'pie',
                  zlevel: 2,
                  cursor: 'default',
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ['37%', '50%'],
                  center: ['45%', '50%'],
                  color: [
                      'rgba(0, 150, 254, 0.5)',
                      'rgba(2, 205, 206, .5)',
                      'rgba(253, 160, 0, .5)',
                      'rgba(191, 40, 18, .5)',
                  ],
                  label: {
                      show: false,
                  },
                  labelLine: {
                      show: false,
                  },
                  itemStyle: {
                      normal: {
                          // shadowBlur: 15,
                          // shadowColor: 'rgba(0, 0, 0, 0.5)',
                          borderColor: '#0a1a2a',
                          // borderWidth:'10',
                      },
                      ellipsis: {
                          borderColor: '#0a1a2a',
                      },
                  },
                  tooltip: {
                      show: false,
                  },
                  data: [
                    {
                        value: 21,
                        name: '',
                    },
                    {
                        value: 44,
                        name: '',
                    },
                    {
                        value: 35,
                        name: '',
                    },
                  ],
              },
              {
                  name: 'title',
                  type: 'pie',
                  zlevel: 3,
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ['43%', '50%'],
                  center: ['45%', '50%'],
                  color: ['rgba(0, 150, 254, 1)', 'rgba(2, 205, 206, 1)', 'rgba(253, 160, 0, 1)', 'rgba(191, 40, 18, 1)'],
                  label: {
                      show: true,
                   
                      formatter: (params) => {
                          return `
       ${params.name}: ${params.percent}%
       `;
                      },
                      padding:[0,-30],
                      textStyle:{
                          lineHeight:25
                      }
                  },
                  labelLine: {
                      show: true,
                      // showAbove:true,
                      length: 30,
                      length2: 50,
                      
                  },
                  itemStyle: {
                      shadowBlur: 15,
                      shadowColor: 'rgba(0, 0, 0, 0.3)',
                      borderColor: '#0a1a2a',
                  },
                  data: [
                      {
                          value: 1.97,
                          name: '0-2',
                          label: {
                              color: 'rgba(0, 150, 254, 1)',
                          },
                      },
                      {
                          value: 14.98,
                          name: '2-4',
                          label: {
                              color: 'rgba(2, 205, 206, 1)',
                          },
                      },
                      {
                          value: 83.05,
                          name: '>4',
                          label: {
                              color: 'rgba(253, 160, 0, 1)',
                          },
                      },
                  ],
              },
          ],
      
      
      };
  
  
    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
  })();
(function() {
  //  1实例化对象
  var myChart = echarts.init(document.querySelector(".no_hd .chart"));
  var fontColor = '#30eee9';
  // 2 指定配置项和数据

  var option = {
    grid: {
        left: '5%',
        right: '10%',
        top:'20%',
        bottom: '15%',
        containLabel: true
    },
    tooltip : {
        show: true,
        trigger: 'item'
    },
    
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            axisLabel:{
                color: fontColor
            },
            axisLine:{
                   show:true,
                   lineStyle:{
                    color:'#397cbc'
                }
            },
            axisTick:{
                show:false,
            },  
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#195384'
                }
            },
            data : ["05:00","07:00","09:00","11:00","13:00","15:00","17:00","19:00","21:00","23:00","01:00","03:00"]
        }
    ],
    yAxis : [
        {
            type : 'value',
            name : '客流量（人次）',
            min:0,
            max:1000,
            axisLabel : {
                formatter: '{value}',
                textStyle:{
                    color:'#2ad1d2'
                }
            },
            axisLine:{
                lineStyle:{
                    color:'#27b4c2'
                }
            },
            axisTick:{
                show:false,
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#11366e'
                }
            }
        },
        {
            type : 'value',
            name : '班次数（班）',
            min:0,
            max:1000,
            axisLabel : {
                formatter: '{value} ',
                textStyle:{
                    color:'#186afe'
                }
            },
            axisLine:{
                lineStyle:{
                    color:'#186afe'
                }
            },
            axisTick:{
                show:false,
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#11366e'
                }
            }
        }
    ],
    series : [
        {
            name:'已采纳',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            itemStyle: {
                normal: {
                    color:'#0092f6',
                    lineStyle: {
                        color: "#0092f6",
                        width:1
                    },
                    areaStyle: { 
                        //color: '#94C9EC'
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: 'rgba(7,44,90,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(0,146,246,0.9)'
                        }]),
                    }
                }
            },
            markPoint:{
                itemStyle:{
                    normal:{
                        color:'red'
                    }
                }
            },
            data:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
        },
        {
            name:'已发布',
            type:'line',
            stack: '总量',
            symbol:'circle',
            symbolSize: 8,
            
            itemStyle: {
                normal: {
                    color:'#00d4c7',
                    lineStyle: {
                        color: "#00d4c7",
                        width:1
                    },
                    areaStyle: { 
                        //color: '#94C9EC'
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: 'rgba(7,44,90,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(0,212,199,0.9)'
                        }]),
                    }
                }
            },
            data:[220, 182, 191, 234, 290, 330, 310,201, 154, 190, 330, 410]
        },
    ]
  };


  // 3 配置项给实例对象
  myChart.setOption(option);
  // 4 让图表跟随屏幕自动的去适应
  window.addEventListener('resize',function() {
      myChart.resize();
  });
})();

$(function() {
	var myChart = echarts.init(document.getElementById("sxMap"));
	// make_city("绍兴",myChart);
	const geoJSON = {};
	$.ajax({
	  url: '../js/json/shaoxing.json',
	  async: false,
	  dataType: 'json',
	  success: function (result) {
	    console.log(result)
		geoJSON.shaoxing=result;
	  }
	});
	echarts.registerMap('shaoxing',{geoJSON:geoJSON['shaoxing']});
	var data = [{"name":"柯桥区",value:99.53},
	{"name":"越城区",value:98.96},
	{"name":"上虞区",value:48.6},
	{"name":"诸暨市",value:51.3},
	{"name":"嵊州市",value:24.9},
	{"name":"新昌县",value:80.2}
	];
	
	option = {
	    tooltip: {
	        trigger: 'item',
	        formatter: function (params) {
	          if(typeof(params.value)[2] == "undefined"){
	            return params.name + ' : ' + params.value + "%";
	          }else{
	            return params.name + ' : ' + params.value[2] + "%";
	          }
	        }
	    },
	    
	    visualMap: {
	        show: true,
	        min: 0,
	        max: 100,
	        left: 'left',
	        top: 'bottom',
	        text: ['高', '低'], // 文本，默认为数值文本
	        calculable: true,
	        seriesIndex: [1],
			  precision:2,
			  outOfRange:{
				  color: ['#3B5077']//默认不选中颜色
			  },
	        inRange: {
	             color: ['#B0C4DE','#87CEFA',"#00BFFF","#6495ED","#1E90FF"] // 黑紫黑
		
	        }
	    },
	    geo: {
	        show: true,
	        type:'map',
	        map: 'shaoxing',
	        zoom:1.4,
	        label: {
	            normal: {
	                show: false,
	            },
	            emphasis: {
	                show: false,
	            }
	        },
	        roam: true,
	        itemStyle: {
	            normal: {
	                areaColor: '#142957',
	                borderColor: '#0692a4',
	            },
	            emphasis: {
	                areaColor: '#0b1c2d',
	            }
	        }
	    },
	    series : [
	    {
	        name: 'credit_pm2.5',
	        type: 'scatter',
	        coordinateSystem: 'geo',
	        data: convertData(data),
	        symbolSize: function (val) {
	            return val[2] / 10;
	        },
	        label: {
	            normal: {
	                formatter: '{b}',
	                position: 'right',
	                show: true
	            },
	            emphasis: {
	                show: true
	            }
	        },
	        itemStyle: {
	            normal: {
	                color: '#D4EEFF'
	            }
	        }
	    },
	    {
	        type: 'map',
	        map: 'shaoxing',
	        geoIndex: 0,
	        aspectScale: 0.75, //长宽比
	        showLegendSymbol: false, // 存在legend时显示
	        label: {
	            normal: {
	                show: false
	            },
	            emphasis: {
	                show: false,
	                textStyle: {
	                    color: '#fff'
	                }
	            }
	        },
	        roam: true,
	        itemStyle: {
	            normal: {
	                areaColor: '#031525',
	                borderColor: '#3B5077',
	            },
	            emphasis: {
	                areaColor: '#2B91B7'
	            }
	        },
	        animation: false,
	        data: data
	    },
	    {
	        name: '点',
	        type: 'scatter',
	        coordinateSystem: 'geo',
	        symbol: 'pin',
	        symbolSize: 1,
	        label: {
	        	normal: {
	        		show: true,
	        		formatter: '{b}\n 通村率：{@[2]}%',
	        		lineHeight: 20,
	        	   backgroundColor:'rgba(255,255,255,.9)',
	        	   borderColor:'#80cffd',
	        	   borderWidth:'1',
	        	   padding:[5,10,4],
	        	   color:'#000000',
	        	   fontSize: 14,
	        	   fontWeight:'normal',
	        	}
	        },
	        itemStyle: {
	            normal: {
	                color: '#C9C132', //标志颜色
	            }
	        },
	        zlevel: 6,
	        data: convertData(data)
	    }
	]
	};
	myChart.setOption(option);
	  
	  myChart.on("click",function(params){//地图上点击事件,省级可以点击，市级不能
	  	if(params.name.indexOf("新昌县") != -1) {
	  		console.log("新昌县切换...");
			// window.open("cityBus/xinchangxian.html","_self");
	  		window.open("https://datav.aliyuncs.com/share/489d3e1eccbcad035d15febbd50c672c?whatever=true");
	  	}
		if(params.name.indexOf("嵊州市") != -1) {
			console.log("嵊州市切换...");
			window.open("../cityBus/szprosperity.html","_self");
		}
	  });
	  
	window.addEventListener('resize',function() {
	  myChart.resize();
	});
})


var convertData = function (data) {
	var geoCoordMap = {
		"柯桥区":[120.64691822315731,30.18344328732051],
		"上虞区":[120.76843113697011,30.14201843033888],
		"越城区":[120.66410186753488,30.079420868677747],
		"诸暨市":[120.34129483387062,29.898992602713303],
		"嵊州市":[120.6186879502515,29.65228456557833],
		"新昌县":[120.88626184127358,29.43043144263232]
	}
      var res = [];
      for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
              res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
              });
          }
      }
      return res;
  };